<template>
  <div class="main-container">
    <AnimeFilter/>
    <VideoList :videoList="videoList"/>

    <!-- 优化后的分页控件 -->
    <div class="pagination">
      <button
          class="page-item prev"
          :disabled="currentPage === 1"
          @click="goToPage(currentPage - 1)"
      >
        上一页
      </button>

      <template v-for="page in displayedPages" :key="page">
        <button
            v-if="page === '...'"
            class="page-item ellipsis"
            disabled
        >
          ...
        </button>
        <button
            v-else
            class="page-item"
            :class="{ active: page === currentPage }"
            @click="goToPage(page)"
        >
          {{ page }}
        </button>
      </template>

      <button
          class="page-item next"
          :disabled="currentPage === totalPages"
          @click="goToPage(currentPage + 1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import AnimeFilter from "@/components/VideoFilter.vue"
import VideoList from "@/components/VideoList.vue"

// 模拟数据
const videoList = [
  {
    videoId: 1,
    avatarUrl: "http://localhost:7150/src/assets/image/lbt2.png",
    videoTitle: "咒术回战 第二季",
    videoStatus: "连载中",
    videoPlayCount: "5000.2万",
    videoUpdate: "更新至第24集",
    videoScore: '★9.8'
  },
  {
    videoId: 2,
    avatarUrl: "http://localhost:7150/src/assets/image/lbt2.png",
    videoTitle: "咒术回战 第二季",
    videoStatus: "连载中",
    videoPlayCount: "1254.2万",
    videoUpdate: "更新至第24集",
    videoScore: '★9.8'
  }
]

// 分页相关逻辑
const currentPage = ref(1)
const totalPages = ref(30 / 15) //总页数
const maxVisiblePages = 5 // 最多显示的页码数量

// 计算显示的页码数组
const displayedPages = computed(() => {
  const pages = []
  let startPage = 1
  let endPage = totalPages.value

  if (totalPages.value > maxVisiblePages) {
    const half = Math.floor(maxVisiblePages / 2)
    startPage = Math.max(1, currentPage.value - half)
    endPage = Math.min(totalPages.value, currentPage.value + half)

    if (startPage > 1) {
      pages.push(1)
      if (startPage > 2) {
        pages.push('...')
      }
    }

    for (let i = startPage; i <= endPage; i++) {
      pages.push(i)
    }

    if (endPage < totalPages.value) {
      if (endPage < totalPages.value - 1) {
        pages.push('...')
      }
      pages.push(totalPages.value)
    }
  } else {
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i)
    }
  }

  return pages
})

// 跳转到指定页码
const goToPage = (page) => {
  if (page < 1 || page > totalPages.value || page === currentPage.value) return
  currentPage.value = page
  // 这里可以添加获取对应页码数据的逻辑
  scrollToTop()
}

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.page-item {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 4px;
  border: 1px solid #ddd;
  color: #3498db;
  text-decoration: none;
  border-radius: 4px;
}

.page-item.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

.page-item:hover:not(.active) {
  background-color: #f5f5f5;
}

.page-item.next {
  padding: 6px 16px;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }

  .video-list-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sort-options {
    margin-top: 10px;
  }
}
</style>
